<template>
    <div style="text-align:left;">

        <!--查询-->
        <div>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item>
                    <el-button type="danger" @click="eventDeleteAll">批量删除</el-button>
                </el-form-item>

                <el-form-item>
                    <el-input v-model="formInline.orderNo" placeholder="订单号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="formInline.productName" placeholder="商品名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="formInline.state" placeholder="订单状态">
                        <el-option label="全部" value="-1"></el-option>
                        <el-option v-for="(item, index) in orderStateData" :key="index" :label="item.name"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="eventSearch">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!--列表-->
        <div>
            <div>
                <el-checkbox v-model="checkedAll" @change="eventCheckedAll">全选</el-checkbox>
            </div>
            <div v-for="(item, index) in orderData" :key="index" style="margin-bottom:10px;">
                <div style="background-color:rgb(133, 133, 237);">
                    <el-row>
                        <el-col :span="1"><el-checkbox v-model="item.master.isChecked"></el-checkbox></el-col>
                        <el-col :span="4">{{ item.master.orderNo }}</el-col>
                        <el-col :span="4">{{ item.master.orderTime }}</el-col>
                        <el-col :span="5">支付方式：{{ item.master.payType }}</el-col>
                        <el-col :span="5">订单状态：{{ item.master.orderState }}</el-col>
                        <el-col :span="5"><span @click="dialogVisible = true">查看详情</span></el-col>
                    </el-row>
                </div>
                <div>
                    <el-table :data="item.products" style="width: 100%" :show-header="false">
                        <el-table-column prop="name" label="姓名"></el-table-column>
                        <el-table-column prop="name" label="图片" width="180">
                            <template slot-scope="scope">
                                <img :src="'http://localhost:5164/' + scope.row.image" style="width:50px;" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="price" label="price" width="180">
                            <template slot-scope="scope">
                                <span style="color:red;font-weight:600">￥{{ scope.row.price.toFixed(2) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="number" label="price" width="180"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

        <!--弹框-->
        <el-dialog title="订单详情" :visible.sync="dialogVisible" width="80%" >
            <!--弹框中，放明细页面-->
            <orderDetail  :orderNo1="164523121"/>
        </el-dialog>
    </div>
</template>

<script>

import orderDetail from '@/views/order/DetailView.vue'

export default {
    components:{
        orderDetail
    },
    data() {
        return {
            dialogVisible:false,
            checkedAll: false,
            orderData: [
                {
                    'master': {
                        orderNo: '987789032453821',
                        orderAmount: 2339.99,
                        orderTime: '2023-9-26 12:25:36',
                        orderState: '待发货',
                        payType: '微信支付',
                        isChecked: false,
                    },
                    products: [
                        { id: 1, name: '苹果15 pro1', image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', number: 1, price: 39.99 },
                    ]
                },

                {
                    'master': {
                        orderNo: '987789032453822',
                        orderAmount: 13339.99,
                        orderTime: '2023-9-26 12:25:36',
                        orderState: '待发货',
                        payType: '微信支付',
                        isChecked: false,
                    },
                    products: [
                        { id: 1, name: '华为15 pro1', image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', number: 1, price: 139.99 },
                        { id: 2, name: '华为15 pro2', image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', number: 1, price: 239.99 },
                        { id: 3, name: '华为15 pro3', image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', number: 1, price: 339.99 },
                    ]
                }
            ],
            formInline: {
                orderNo: '',
                productName: '',
                state: ''
            },
            orderStateData: []
        }
    },
    mounted() {
        this.onloadOrderStateData()
        this.onloadOrderData()
    },
    methods: {

        //加载状态枚举的下拉框
        onloadOrderStateData() {
            let url = 'http://localhost:5164/order/state'
            this.$http.get(url).then(res => {
                this.orderStateData = res.data
                            
            })
        },
        //加载订单数据
        onloadOrderData() {
            let url = 'http://localhost:5164/order2'
            this.$http.get(url, {
                params: {
                    orderNo: this.formInline.orderNo,
                    productName: this.formInline.productName,
                    state: this.formInline.state
                }
            }).then(res => {
                this.orderData = res.data



                this.$nextTick(() => {
                    //给数据源加上一列
                    this.orderData.forEach(x => {
                        x.master.isChecked = false
                    })
                })

                console.log(this.orderData);


            })
        },
        //订单查询
        eventSearch() {
            this.onloadOrderData()
        },

        //全选事件
        eventCheckedAll() {
            this.orderData.forEach(x => {
                //将全选的值，赋值给数据表中，订单的那个ischecked属性，用来达到全选的效果
                x.master.isChecked = this.checkedAll
            })
        },
        //批量删除
        eventDeleteAll() {
            let d = []
            //遍历数据源中，复选框是否选中
            this.orderData.forEach(x => {
                if (x.master.isChecked) {
                    //把选中的订单号拿出来（你也可拿id)
                    d.push(x.master.orderNo)
                }
            })

            if (d.length <= 0) {
                this.$message.error('请至少选择一条')
                return
            }

            let url = 'http://localhost:5164/order2'
            this.$http.delete(url, { data: d }).then(res => {

                console.log(res);
                this.$message.success('操作成功！')

                this.onloadOrderData()
            })

        }

    }
}
</script>